<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="./node_modules/vue/dist/vue.js"></script>


<body >
<div>
    <input id="submit" @keyup.enter="keyboard('enter')"
           @keyup.tab="keyboard('tab')"
           @keyup.delete="keyboard('delete')"
           @keyup.esc="keyboard('esc')"
           @keyup.up="keyboard('up')"
           @keyup.down="keyboard('down')"
           @keyup.left="keyboard('left')"
           @keyup.right="keyboard('right')"
           @keyup.ctrl="keyboard('ctrl')"
           @keyup.alt="keyboard('alt')"
           @keyup.shift="keyboard('shift')"
           @keyup.meta="keyboard('meta')">
</div>


<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#submit",
        methods:{
            keyboard:function (val) {
                alert(val);
            }
        }
    });
</script>
</body>
</html>